<template>
  <div class="schedule bg-c-base">
    <v-chart :options="options" ref="chart"></v-chart>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { reactive } from 'vue';
export default {
	name : 'Schedule',
	setup () {
		function getVirtulData (year) {
			year = year || '2020';
			var date = +echarts.number.parseDate(year + '-01-01');
			var end = +echarts.number.parseDate(+year + 1 + '-01-01');
			var dayTime = 3600 * 24 * 1000;
			var data = [];
			for (var time = date; time < end; time += dayTime) {
				data.push([
					echarts.format.formatTime('yyyy-MM-dd', time),
					Math.floor(Math.random() * 10000),
				]);
			}
			return data;
		}

		var data = getVirtulData(2020);
		console.log(data);
		let options = reactive({
			tooltip : {
				trigger : 'item',
			},
			calendar : [{
				top : 30,
				left : 80,
				right : 40,
				bottom : 10,
			  range : ['2020-06-01', '2020-12-31'],
				splitLine : {
					show : true,
					lineStyle : {
						color : 'rgb(127, 127, 127)'
					}
				},
				yearLabel : { show : false },
				dayLabel : {
					color : '#c5fb79',
					fontSize : 18
				},
				monthLabel : {
					color : '#c5fb79',
					fontSize : 18
				},
				itemStyle : {
					color : 'transparent',
					borderWidth : 1,
					borderColor : 'rgb(48, 48, 48)'
				}
			}],
			series : [
				{
					name : '销量',
					type : 'scatter',
					coordinateSystem : 'calendar',
					data : data,
					symbolSize : function (val) {
						return val[1] / 500;
					},
					itemStyle : {
						color : '#c5fb79',
					},
				},
				{
					name : 'Top 12',
					type : 'effectScatter',
					coordinateSystem : 'calendar',
					data : data
						.sort(function (a, b) {
							return b[1] - a[1];
						})
						.slice(0, 12),
					symbolSize : function (val) {
						return val[1] / 500;
					},
					showEffectOn : 'render',
					rippleEffect : {
						brushType : 'stroke',
					},
					hoverAnimation : true,
					itemStyle : {
						color : '#c5fb79',
						shadowBlur : 10,
						shadowColor : '#333',
					},
					zlevel : 1,
				},
			],
		});
		return {
			options
		};
	},
};
</script>

<style lang="scss" scoped>
.schedule {
  margin-top: 20px;
  height: 235px;
}
</style>
